<template>
  <div class="wrap">
    <div class="wrap-title">
      <!-- <el-select v-model="selectModal" placeholder="请选择">
        <el-option
          v-for="item in selectOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select> -->
      <el-button-group>
        <el-button
          type="primary"
          :class="[active == 0 ? 'active' : '']"
          @click="activeHandler(0)"
          >男厕</el-button
        >
        <el-button
          type="primary"
          :class="[active == 1 ? 'active' : '']"
          @click="activeHandler(1)"
          >女厕</el-button
        >
        <el-button
          type="primary"
          :class="[active == 2 ? 'active' : '']"
          @click="activeHandler(2)"
          >第三</el-button
        >
      </el-button-group>
    </div>
    <div class="wrap-content">
      <div class="wrap-content-box">
        <div class="content-item" style="color: #5bf00f">
          <div class="">空气质量</div>
          <div
            class=""
            style="
              font-size: 21px;
              font-weight: bold;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-top: 8px;
            "
          >
            {{ wcData.kqScore | mkfs
            }}<img
              src="../../assets/img/home-13.png"
              style="width: 20px; height: 20px; margin-left: 5px"
            />
          </div>
        </div>
        <div class="content-item" style="color: #11c1fb">
          <div class="">
            <img
              src="../../assets/img/home-09.png"
              style="width: 30px; height: 30px"
            />
          </div>
          <div class="">{{ wcData.sdNumber | mkfs }}%</div>
        </div>
        <div class="content-item" style="color: #fbd206">
          <div class="">
            <img
              src="../../assets/img/home-19.png"
              style="width: 30px; height: 30px"
            />
          </div>
          <div class="">{{ wcData.aqNumber | mkfs }}mg/m³</div>
        </div>
      </div>
      <div class="wrap-content-box">
        <div class="wrap-item">
          <div class="content-item" style="color: #f2c804">
            <div class="">
              <img
                src="../../assets/img/home-11.png"
                style="width: 30px; height: 30px"
              />
            </div>
            <div class="">{{ wcData.wdNumber | mkfs }}℃</div>
          </div>
        </div>
        <div class="wrap-item">
          <div class="content-item" style="color: #c4b9fb">
            <div class="">
              <img
                src="../../assets/img/home-20.png"
                style="width: 30px; height: 30px"
              />
            </div>
            <div class="">{{ wcData.pmNumber | mkfs }}μg/m³</div>
          </div>
        </div>
        <div class="wrap-item">
          <div class="content-item" style="color: #04e6e4">
            <div class="">
              <img
                src="../../assets/img/home-18.png"
                style="width: 30px; height: 30px"
              />
            </div>
            <div class="">{{ wcData.lhqNumber | mkfs }}mg/m³</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["wcData"],
  data() {
    return {
      selectModal: "选项1",
      selectOptions: [
        {
          value: "选项1",
          label: "深圳创点智慧卫生间",
        },
        {
          value: "选项2",
          label: "深圳创点智慧卫生间1",
        },
        {
          value: "选项3",
          label: "深圳创点智慧卫生2",
        },
      ],
      active: 0,
    };
  },
  filters: {
    mkfs: function (value) {
      if (value === undefined) return "无";
      return value;
    },
  },
  methods: {
    activeHandler(active) {
      this.active = active;
    },
  },
};
</script>
<style lang="scss" scoped>
.wrap {
  width: 505px;
  height: 360px;
  box-sizing: border-box;
  padding: 80px 20px 0px 20px;
  background: url("../../assets/img/home-01.png") no-repeat center center;
  background-size: contain;
  display: flex;
  flex-direction: column;
  .wrap-title {
    display: flex;
    flex-direction: row-reverse;
    padding: 0 15px 0 0;
    justify-content: space-between;
    ::v-deep .el-select {
      .el-input__inner {
        background-color: #276bce;
        border: 1px solid #276bce;
        color: #f7f7f7;
        height: 29px;
        line-height: 29px;
        border-radius: 0px;
      }
      .el-input__icon {
        line-height: 29px;
      }
    }
    ::v-deep .el-button-group {
      .el-button {
        padding: 6px 16px;
        border-radius: 0px;
      }

      .el-button--primary {
        background-color: transparent;
        border-color: #ff9b2f;
        &.active {
          background-color: #ff9b2f;
          border-color: #ff9b2f;
        }
      }
    }
  }
  .wrap-content {
    margin-top: 20px;
    .wrap-content-box {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      margin-bottom: 8px;

      &:last-child {
        margin-bottom: 0px;
      }

      .content-item {
        width: 145px;
        height: 97px;
        box-sizing: border-box;
        border: 2px solid rgba(148, 188, 221, 0.5);
        border-radius: 9px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        &.ip1 {
        }
      }
    }
  }
}
</style>